<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="container">
		<!-- :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<z-paging 
			v-if="firstLoaded || isCurrentPage" 
			ref="paging" 
			v-model="dataList" 
			@query="queryList" 
			:fixed="false"
		>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<rowCon 
				v-if="tabIndex === 0 || tabIndex === 1 || tabIndex === 3" 
				:dataList="dataList"
				:isOnePage="isOnePage" 
				:isShowDrafts="isShowDrafts"
				@refresh="refresh" 
			></rowCon>
			<view v-if="tabIndex === 2">
				评论
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref, watch,reactive,onMounted } from 'vue';
	import request from '/http/request.js';
	import {queryCareShopList, queryCareBrandList, collectionUserList} from '/api/user.js'
	import {useSwiperItem} from '@/composables/swiperItem.js'
	import { articlePages } from '@/api/posting.js'
	
	const props = defineProps({
		tabIndex: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		}
	});
	const {paging,dataList,firstLoaded,isCurrentPage} = useSwiperItem(props)

	const isOnePage = ref(true)

	//是否显示草稿箱
	const isShowDrafts = ref(false)
	// //是否是草稿箱页面 （如果是 就要显示删除的icon）
	// const isDraftsPage = ref(false)

	onMounted(() => {
		if(props.tabIndex === 0) isShowDrafts.value = true
	})

	const queryList = (pageNo, pageSize) => {
		if(pageNo == 1){
			isOnePage.value = true
		}else{
			isOnePage.value = false
		}

		const datas = {
			page: pageNo,
			pageSize: pageSize,
			tabType:props.tabIndex + 1
		};

		articlePages(datas).then(res => {
			const newList = res.list.map(item => {
				return {...item,
					bannerList:['https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1723627955837'],
					userAvatar:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png',
					userName:'小红'
				}
			})
			console.log('我的帖子res',res)
			paging.value.complete(newList);
			firstLoaded.value = true;
		}).catch(res => {
			paging.value.complete(false);
		});
		
		

	};


</script>

<style lang="scss" scoped>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.container {
		height: 100%;
	}

	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	.attention-con{
		width: 750rpx;
		.user-item{
			width: 750rpx;
			height: 136rpx;
			padding: 30rpx;
			box-sizing: border-box;
			@include flex(row,space-between);
			.user-left{
				width: 580rpx;
				height: 100%;
				@include flex(row,flex-start);
				image{
					width: 76rpx;
					height: 76rpx;
					border-radius: 38rpx;
					margin-right: 16rpx;
				}
				view{
					flex: 1;
					height: 100%;
					@include flex(column,space-between,flex-start);
					text:nth-of-type(1){
						font-weight: 600;
						font-size: 30rpx;
						color: #111111;
					}
					text:nth-of-type(2){
						font-weight: 400;
						font-size: 22rpx;
						color: #A9A7B3;
					}
				}
				view.offline-store{
					@include flex(row,flex-start);
				}
			}
			.user-right{
				width: 104rpx;
				height: 48rpx;
				border-radius: 24rpx;
				border: 2rpx solid #ADADAD;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				@include flex();
			}
			.take-stroll{
				border: 2rpx solid #16DFF2;
				color: #16DFF2;
			}
		}
		.brand-item{
			width: 750rpx;
			height: 356rpx;
			margin-bottom: 20rpx;
			.item-imgs{
				width: auto;
				height: 220rpx;
				view{
					@include flex(row,flex-start);
				}
				image{
					width: 220rpx;
					height: 220rpx;
					margin-right: 10rpx;
					flex-shrink: 0;
				}
				image:nth-of-type(1){
					margin-left: 30rpx;
				}
				image:last-child{
					padding-right: 30rpx;
				}
			}
		}
	}
</style>